<template>
  <div>
    <el-card class="mapBox">
      <el-button type="primary" @click="drawer = true">查看地图</el-button>
      <el-drawer
        :visible.sync="drawer"
        :before-close="handleClose"
        size="100%"
        :with-header="false"
        custom-class="drawerBox"
      >
        <el-button @click="drawer = false" circle size="mini" class="close" icon="el-icon-close"></el-button>
        <viewMap />
      </el-drawer>
    </el-card>
  </div>
</template>

<script>
import viewMap from './viewMap.vue'
export default {
  data() {
    return {
      drawer: true,
    }
  },
  components: {
    viewMap,
  },
  methods: {
    handleClose() {
      this.drawer = false
    },
  },
}
</script>

<style lang="scss" scoped>
.mapBox {
  ::v-deep .drawerBox {
    padding: 0;
    .el-card__body {
      padding: 0;
    }
    .close {
      position: absolute;
      left: 10px;
      top: 10px;
      z-index: 1;
    }
  }
}
</style>
